<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .dv {
      background: hotpink;
      /* border: 30px dashed #7cc; */
      width: 200px;
      padding: 30px;
      margin: 100px;
    }
  </style>
  <body>
    <div class="dv"></div>
  </body>
</html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  // width和heigh都不能获取css样式
  $(".dv").height(300);
  console.log($(".dv").height());
  //   内置宽高 innerWidth() innerHeight()  这两个属性不会包含border 包含padding
  console.log("===innerHeight" + $(".dv").innerHeight());
  console.log("===innerWidth" + $(".dv").innerWidth());
  // 外置宽高 outerWidth() outerHeight() 这两个属性包含border和padding
  console.log("===outerHeight" + $(".dv").outerHeight());
  console.log("===outerWidth" + $(".dv").outerWidth());
</script>
